<template>
  <el-form class="add-event-lottery" v-if="wbData">
    <el-divider content-position="center">抽奖参数</el-divider>
    <el-popover placement="left" width="440" trigger="hover">
      <img class="lottery-img-info" src="https://static.hd.xxx.com/upload/biz/1/1/奖品设置说明.jpeg"> 
      <template #reference>
        <el-button type="primary" class="margin-10" @click.stop="onDisplayLotteryInfo">悬停查看奖品设置说明</el-button>
      </template>
    </el-popover>
    <el-form-item label="开始时间">
      <el-date-picker format="YYYY-MM-DD HH:mm:ss" v-model="wbData.sdate" type="datetime" placeholder="选择日期时间" @change="onUpdateWbComponent"></el-date-picker>
    </el-form-item>
    <el-form-item label="截止时间">
      <el-date-picker format="YYYY-MM-DD HH:mm:ss" v-model="wbData.edate" type="datetime" placeholder="选择日期时间" @change="onUpdateWbComponent"></el-date-picker>
    </el-form-item>
    
    <switch-normal v-model="wbData.isNeedUserLevel" label="等级要求" @change="onUpdateWbComponent"></switch-normal>
    <input-normal label="中奖次数限制" v-model="wbData.lotteryNumLimit" placeholder="默认1" @change="onUpdateWbComponent"></input-normal>
    <input-normal label="抽奖总次数限制" v-model="wbData.lotteryTotalLimit" placeholder="默认30" @change="onUpdateWbComponent"></input-normal>
    <input-normal label="抽奖基数(分母)" v-model="wbData.lucky_base" placeholder="100-抽奖基数数值(分母)" @change="onUpdateWbComponent"></input-normal>
    <slider-normal label="每人每天次数" v-model="wbData.day_limit" :min="1" :max="100" :step="1" @change="onUpdateWbComponent"></slider-normal>
    <el-button type="primary"  class="margin-left-right-16 margin-bottom-10" @click.stop="onAddWbItem"><el-icon><i class="jy-icon-plus"></i></el-icon>添加奖品</el-button>
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(item, index) in eventWbLists" :key="'drag_' + index" :name="index+1" class="list-group-item">
        <template #title>
          奖品{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteWbItem($event, index)"></i>
        </template>
        <input-normal label="奖品名称" v-model="item.gift_name" @change="onUpdateWbItem(index)"></input-normal>
        <input-normal label="每天总中奖量" v-model="item.gift_daylimit" @change="onUpdateWbItem(index)"></input-normal>
        <input-normal label="每人中奖限制" v-model="item.gift_person_limit" @change="onUpdateWbItem(index)"></input-normal>
        <input-normal label="奖品总数" v-model="item.gift_totallimit" @change="onUpdateWbItem(index)"></input-normal>
        <input-normal label="中奖概率值(分子)" v-model="item.gift_percent" @change="onUpdateWbItem(index)"></input-normal>
        <add-img-con :url="item.pic_url" picAttr="pic_url" :event="event" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
        <input-normal label="图片地址" v-model="item.pic_url" @change="onUpdateWbItem(index)"></input-normal>
        <dropdown-normal v-model="item.popId" :valLists="pushPops()" label="跳转弹层" @change="onUpdateWbItem(index)"></dropdown-normal>
      </el-collapse-item>
    </el-collapse>
    <input-normal label="验证计数组件id" v-model="wbData.num_com_id" placeholder="计数组件id" @change="onUpdateWbComponent"></input-normal>
    <input-normal label="需要验证的次数" v-model="wbData.numberLimit" placeholder="计数次数" @change="onUpdateWbComponent"></input-normal>
    <input-normal label="关联发博组件id" v-model="wbData.relateCompId" placeholder="组件id" @change="onUpdateWbComponent"></input-normal>
  </el-form>
</template>

<script setup lang="ts">
import { useWebControlsStore } from '@/store/web/controls'
import { useWebComponentStore } from '@/store/web/component'
import { getWbListByItem } from '@/components/utils'
import { WbComponentDatas } from '@/const/web/'
import { pushPops } from '@/views/ts/'

const props = defineProps<{ 
  event: IEvent,
  index: number,
}>()

const event = props.event
const useWebControls = useWebControlsStore()
const useWebComponent = useWebComponentStore()

const  activeNames = [1]
let wbData_: any
const wbData = computed(() => {
  try {
    wbData_ = useWebControls.currentControls![event.controlId] && useWebControls.currentControls![event.controlId].data
  } catch (error) {
    console.log("controlData.data null")
  }
  return wbData_
})
let wbLists_: any[]
const eventWbLists = computed(() => {
  if(wbData_.elements) {
    wbLists_ = wbData_.elements
  }
  return wbLists_
})
const onUpdateWbComponent = () => {
  useWebControls.updateWbComponent({ controlId: event.controlId, data: wbData_ })
}
const onAddWbItem = () => {
  const controlId = event.controlId
  let item: any
  const wbList = getWbListByItem(useWebComponent.currentComponentData!)
  if(wbList[0]) {
    item = _.cloneDeep(wbList[0])
    item.mid = ''
  } else {
    item = _.cloneDeep(WbComponentDatas[event.controlId].data.elements[0])
  }
  useWebControls.addWbComponentItem({controlId, item})
}
const onDeleteWbItem = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  const params = {controlId: event.controlId, index}
  useWebControls.deleteWbComponentItem(params)
}
const onUpdateWbItem = (index: number) => {
  const controlId = event.controlId
  const wbList = getWbListByItem(useWebComponent.currentComponentData!)
  const params = {item: wbList[index], index, controlId}
  useWebControls.updateWbComponentItem(params)
}
let isDisplayLotteryInfo = false
const onDisplayLotteryInfo = () => {
  isDisplayLotteryInfo = !isDisplayLotteryInfo
}
</script>
